<template>
  <div class="login_container">
    <el-row>
      <!-- element-plus里面的栅格布局，一个页面被分为24个栅格 -->
      <!-- 占位符占12个栅格，剩下的12个则是表单内容，正好分到界面右边 -->
      <!-- xs是当界面小于768px时占位符占的栅格数，0说明不显示 -->
      <el-col :span="12" :xs="0"></el-col>
      <el-col :span="12">
        <el-form class="login_form" :model="loginForm" :rules="rules" ref="loginForms">
          <h1>您好</h1>
          <h2>欢迎来到我的项目</h2>
          <el-form-item prop="username">
            <el-input :prefix-icon="User" v-model="loginForm.username"></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input
              type="password"
              :prefix-icon="Lock"
              show-password
              v-model="loginForm.password"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button
              :loading="isLoading"
              class="login-btn"
              type="primary"
              size="default"
              @click="handleLogin"
            >
              登录
            </el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
//@ts-ignore   element-plus icon
import { User, Lock } from '@element-plus/icons-vue'
import { reactive, ref, onMounted } from 'vue'
//引入消息提醒组件
import { ElNotification } from 'element-plus'
//引入路由
import { useRouter, useRoute } from 'vue-router'
//引入用户仓库
import useUserStore from '@/store/modules/user'
//引入获取时间函数
import { getTime } from '@/utils/time'
// import { reqGetUser } from '@/api/acl/user/index'

//登录表单
// let loginForm = reactive({ username: 'admin', password: 'atguigu123' })
let loginForm = reactive({ username: 'admin', password: '111111' })
let useStore = useUserStore()
let $router = useRouter()
let $route = useRoute()
//声明isLoading用于判断template中的按钮是否有加载图标
let isLoading = ref(false)
//判断账号和密码是否符合规范
let loginForms = ref()

onMounted(async () => {
  // let result = await reqGetUser(1, 3, '')
  // console.log(result.data.userList)
})

const handleLogin = async () => {
  //验证表单是否符合规范
  await loginForms.value.validate()

  isLoading.value = true
  useStore.login(loginForm).then(
    () => {
      isLoading.value = false
      let redirect: string = $route.query.redirect as string
      //跳转页面
      $router.push({ path: redirect || '/' }) // 如果有跳转页面，则转到跳转页面，否则就到首页->/
      //登陆成功消息
      ElNotification({
        type: 'success',
        message: '登陆成功',
        //根据时间变化问候消息
        title: `welcome back,${getTime()}好`,
      })
      //因为store里面的login用了箭头函数导致this为undefined
      // //user.ts中不知道为啥不能用this.token直接改token的值，所以在这改
      // useStore.token = GET_TOKEN()
    },
    (err) => {
      //登陆失败消息
      isLoading.value = false
      ElNotification({
        type: 'error',
        message: err.message,
      })
    },
  )
}
//自定义校验规则函数
//@ts-ignore
const validatorUserName = (rule: any, value: any, callback: any) => {
  //rule校验规则对象
  //value表单元素文本内容
  //callback，一个函数，不符合条件就注入错误信息
  if (value.length >= 5) callback()
  else callback(new Error('账号至少为5位'))
}
//@ts-ignore
const validatorPassWord = (rule: any, value: any, callback: any) => {
  if (value.length >= 6) callback()
  else callback(new Error('密码至少为6位'))
}
//表单验证规则
const rules = {
  username: [{ trigger: 'change', validator: validatorUserName }],
  password: [{ trigger: 'change', validator: validatorPassWord }],
}
</script>

<style scoped lang="scss">
.login_container {
  width: 100%;
  height: 100vh;
  background: url('@/assets/images/background.jpg') no-repeat;
  background-size: cover;
}

.login_form {
  position: relative;
  width: 80%;
  top: 30vh;
  background: url('@/assets/images/login_form.png') no-repeat;
  background-size: cover;
  padding: 40px;

  h1 {
    color: white;
    font-size: 40px;
  }

  h2 {
    color: white;
    font-size: 20px;
    margin: 20px 0;
  }

  .login-btn {
    width: 100%;
  }
}
</style>
